<template>
  <div class="detail-box">
    <el-dialog width="600px" :title="dialogForm.title" v-model="dialogFormVisible" :close-on-click-modal="false" :draggable="true"
      @close="dialogClose">
      <div class="html-box" :style="{'max-height':tableHeight+'px'}" v-html="dialogForm.messageContent"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { getWindowWidthAndHeight } from '@/utils/utils'
export default {
  setup() {
    const state = reactive({
      tableHeight: 0,
      dialogFormVisible: false,
      dialogForm: {},
    })

    function dialogShow(data) {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 400
      state.dialogForm = { ...data }
      state.dialogFormVisible = true
    }

    return {
      ...toRefs(state),
      dialogShow,
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.html-box) {
  overflow: auto;
  img {
    max-width: 100%;
    height: auto;
  }
}
</style>